import QueryMaterial2 from "@/components/QueryMaterial2";
import { s_getSelectData, s_getStockInfo, s_operateInfo, s_stockIn, s_stockOut, status2text } from "@/services/basis";
import { ActionType, EditableFormInstance, EditableProTable, ProCard, ProColumns, ProForm, ProFormDatePicker, ProFormDateRangePicker, ProFormInstance, ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea, ProTable } from "@ant-design/pro-components";
import { Button ,Col,Divider,Image, message, Modal, Row, Space, Tag, Typography} from "antd";
import moment from "moment";
import printJS from "print-js";
import { useEffect, useRef, useState } from "react";
import JsBarcode from 'jsbarcode';

const App:React.FC=()=>{
    const [tdata,setTdata]=useState<any[]>([]);
    const [selectedRecords,setSelectedRecords]=useState<any[]>([]);

    const actionRef_m=useRef<ActionType>();
    //新增
    const [etype,setEtype]=useState(1);//0编辑拣货单，1新增拣货单，2出库--控制实际出库列+删除列是否显示
    const [open,setOpen]=useState(false);
    const formRef_main=useRef<ProFormInstance>();
    const editableRef_main=useRef<EditableFormInstance>();
    const actionRef_main=useRef<ActionType>();

    //查询
    const [openQuery,setOpenQuery]=useState(false);
    const [selectedSale,setSelectedSale]=useState<any[]>([]);
    const [tdata3,setTdata3]=useState<any[]>([]);
    const formRef_query=useRef<ProFormInstance>();
    const editableRef_query=useRef<EditableFormInstance>();
    const actionRef_query=useRef<ActionType>();

    const [material,setMaterial]=useState([]);
    const [dataSource,setDataSource]=useState([]);

    //拣货单出库的标记
    const [openStockOut,setOpenStockOut]=useState(false);
    const formRef_stockout=useRef<ProFormInstance>();
    const actionRef_stockout=useRef<ActionType>();
    const editableRef_stockout=useRef<EditableFormInstance>();


    //按拣货单生成拣货单
    const [openSale,setOpenSale]=useState(false);
    const formRef_sale=useRef<ProFormInstance>();
    const editableRef_sale=useRef<EditableFormInstance>();
    const actionRef_sale=useRef<ActionType>();

    //打印拣货单
    const [openPrint,setOpenPrint]=useState(false);
    const [printDetail,setPrintDetail]=useState([]);
    const formRef_print=useRef<ProFormInstance>();
    const [barCode,setBarcode]=useState();
    const [total,setTotal]=useState(0);
    

    //当组件选择物料时，更新表格并重载--
                useEffect(()=>{
                   if(material.length>0){
                   var x:any[]=editableRef_main.current?.getRowsData?.();
                   // alert(JSON.stringify(x));
                   if(x==undefined)
                      x=[];
                   material.map((item:any)=>{
                      x?.push({rid:Math.random().toFixed(10),id:Math.random().toFixed(10).toString(),
                                material_id:item.id,code:item.code,name:item.name,
                                invstd:item.invstd,invstd2:item.invstd2,munit_name:item.munit_name,  
                                quantity:1,
                                userdefine_id:'[]',vendor_id:'[]',pic:item.pic,
                      });
                   });
                   // alert(JSON.stringify(x));
                   setDataSource(x);
                    
                   formRef_main.current?.setFieldValue('editable_main',x);
                   actionRef_main.current?.reloadAndRest?.();
                }
                },[material]);
    
    interface DataType{
// rid,mid,x_id,out_type_id,operate_time,operater_id,memo,vouch_code,status,org_id,
// custom_id,business_id,did,source_order_code,source_type,source_order_mid,
// source_order_did,warehouse_id,quantity,quantity_outed,quantit_now,
// material_id,dmemo,outtype_name,operater_name,
// org_name,warehouse_name,custom_name,business_name,
// code,name,invstd,invstd2,pic,munit_name
id?:number,x_id?:number,out_type_id?:number,operate_time?:string,operater_id?:number,
memo?:string,vouch_code?:string,status?:number,org_id?:number,
custom_id?:number,business_id?:number,outtype_name?:string, 
operater_name?:string,org_name?:string,custom_name?:string,business_name?:string 

     };

    const columns:ProColumns<DataType>[]=[
        {dataIndex:'rid',title:'rid',search:false},{dataIndex:'id',title:'id',search:false},
        
        {dataIndex:'vouch_code',title:'拣货单号',width:100},
         
        // {dataIndex:'outtype_name',title:'拣货类别'},
        {dataIndex:'custom_name',title:'店铺',width:100},
        {dataIndex:'business_name',title:'业务员',search:false},
        {dataIndex:'org_name',title:'部门',search:false}, 
        
        {dataIndex:'operate_time',title:'制单时间',valueType:'date',width:100},
        {dataIndex:'operater_name',title:'制单人',search:false},
        {dataIndex:'memo',title:'备注',search:false},

        {dataIndex:'status',title:'状态',valueType:'select',width:100,
            valueEnum:{1:{text:'未审核'},5:{text:'已审核'},
            6:{text:'已弃审'},2:{text:'关闭'},3:{text:'删除'},9:{text:'全部'}}
        },  
        
    ];

    interface DataType2{
        // rid,id,mid,source_type,source_produce_order_mid,source_produce_order_did,
        // source_taskcard_id,warehouse_id,quantity,quantity_outed,material_id,
        // userdefine_id,userdefine_name,memo,
        // produce_vouch_code,warehouse_name,
        // code,name,invstd,invstd2,pic,munit_name
        // rid?:number,id?:number,mid?:number,source_type?:number,source_produce_order_mid?:number,
        // source_produce_order_did?:number,
        // source_taskcard_id?:number,warehouse_id?:number,quantity?:number,quantity_outed?:number,material_id?:number,
        // userdefine_id?:string,userdefine_name?:string,memo?:string,
        // produce_vouch_code?:string,warehouse_name?:string,quantity_out?:number,
        // code?:string,name?:string,invstd?:string,invstd2?:string,pic?:string,munit_name?:string
        // mid,did,source_order_code,source_type,source_order_mid,source_order_did,warehouse_id,
        // quantity,quantity_outed,quantit_now,
        // material_id,memo,warehouse_name, 
        // code,name,invstd,invstd2,pic,munit_name,deliverdate
        rid?:number, mid?:number,did?:number,source_order_code?:string,source_type?:number,source_order_mid?:number,
        source_order_did?:number,warehouse_id?:number,deliverdate?:string,
        quantity?:number,quantity_outed?:number,quantit_now?:number,
        material_id?:number,memo?:string,warehouse_name?:string, 
        code?:string,name?:string,invstd?:string,invstd2?:string,pic?:string,munit_name?:string
        default_warehouse_id?:number,default_whposition_id?:number,
        default_warehouse_name?:string,default_whposition_name?:string,
     };

    const columns2:ProColumns<DataType2>[]=[
        {dataIndex:'pic',title:'图片' ,editable:false,
            render:(text)=>{
                var pic=text=="-"||text==undefined?"":"/basis_api/file/get?filename="+text;
                return <Image src={pic}  
                       style={{width:100,height:100}} alt='无' />
           },
         },
         {dataIndex:'rid',title:'rid',editable:false,},
         {dataIndex:'mid',title:'mid',editable:false,},{dataIndex:'did',title:'dID',editable:false,},
         {dataIndex:'source_order_code',title:'来源销售单号',editable:false,},
         {dataIndex:'source_order_mid',title:'source_mid',editable:false,},
         {dataIndex:'source_order_did',title:'source_did',editable:false,},
         {dataIndex:'material_id',title:'物料ID',editable:false,},
         {dataIndex:'default_warehouse_name',title:'默认仓库',editable:false},
         {dataIndex:'default_whposition_name',title:'默认库位',editable:false},
        {dataIndex:'code',title:'SKU',editable:false,},{dataIndex:'name',title:'名称',editable:false,},
        {dataIndex:'invstd',title:'包装规格',editable:false,},
        {dataIndex:'invstd2',title:'型号',editable:false,}, 
        // {dataIndex:'userdefine_id',title:'自定义ID'},{dataIndex:'userdefine_name',title:'自定义值'},
        {dataIndex:'munit_name',title:'单位',editable:false,},
        {dataIndex:'quantity',title:'拣货数量',width:120,editable:etype==2?false:undefined,
            render:(text:any)=>text>=0?<Tag style={{width:80}}>{text}</Tag>:<Tag color="red" style={{width:80}}>{text}</Tag>,
        }, 
        // {dataIndex:'quantity_outed',title:'累计已拣货数量',editable:false},
        {dataIndex:'quantity_now',title:'本次拣货数量',
           
            // render:(text,record,index)=>(record.quantity?record.quantity:0)-(record.quantity_outed?record.quantity_outed:0),
        },
        {dataIndex:'deliverdate',title:'发货日期',valueType:'date',width:200},
        {dataIndex:'memo',title:'备注'}, 
        {
            title:'删除',            
            fixed:'right',
            valueType:'option',
            width:80,
            editable:false,
            render:(text,record,_,action)=>[
               <a  key='del2'
                   onClick={()=>{
                    //  if(etype==2){
                    //     var x:any[]=editableRef_stockout.current?.getRowsData?.();
                    //     formRef_stockout.current?.setFieldValue('editable_stockout',x.filter((item)=>item.rid!=record.rid));
                    //  }else{
                       var x=editableRef_sale.current?.getRowsData?.();
                       formRef_sale.current?.setFieldValue('editable_sale',x.filter((item:any)=>item.rid!=record.rid));
                    //  }
                   }}
               >
                   删除
               </a>,
            ]
         }
    ];

    //从采购订单生单的界面数据
    interface DataType3{
//         rid,id,x_id,vouch_code,vendor_id,status,memo,operate_time,
//  did,material_id,userdefine_id,userdefine_name,quantity,deliverdate,source_type,source_mid,source_did,
//  quantity_deliver,quantity_reback,quantity_stockin,quantity_undeliver,
//  code,name,invstd,invstd2,munit_name,pic,
//  vendor_name,quantity_in_now
rid?:number,id?:number,x_id?:number,vouch_code?:string,vendor_id?:number,status?:number,memo?:string,
operate_time?:string,
 did?:number,material_id?:number,userdefine_id?:string,userdefine_name?:string,quantity?:number,
 deliverdate?:string,source_type?:string,source_mid?:number,source_did?:number,
 quantity_deliver?:number,quantity_reback?:number,quantity_stockin?:number,quantity_undeliver?:number,
 code?:string,name?:string,invstd?:string,invstd2?:string,munit_name?:string,pic?:string,
 vendor_name?:string,quantity_in_now?:number
    };

    const columns3:ProColumns<DataType3>[]=[
        {dataIndex:'pic',title:'图片' ,editable:false,
            render:(text)=>{
                var pic=text=="-"||text==undefined?"":"/basis_api/file/get?filename="+text;
                return <Image src={pic}  
                       style={{width:100,height:100}} alt='无' />
           },
         },
       {dataIndex:'rid',title:'rid',editable:false},{dataIndex:'did',title:'did',editable:false},
       {dataIndex:'vendor_id',title:'供应商ID',editable:false,},{dataIndex:'vendor_name',title:'供应商',editable:false},
       {dataIndex:'vouch_code',title:'采购单号',editable:false},{dataIndex:'material_id',title:'物料ID',editable:false},
       {dataIndex:'code',title:'SKU',editable:false},{dataIndex:'name',title:'名称',editable:false},
       {dataIndex:'invstd',title:'包装规格',editable:false},{dataIndex:'invstd2',title:'型号',editable:false},
       {dataIndex:'munit_name',title:'单位',editable:false},
       {dataIndex:'quantity',title:'总数量',editable:false},
       {dataIndex:'deliverdate',title:'预计交货日期',editable:false,valueType:'date'},
       {dataIndex:'quantity_deliver',title:'已交货数',editable:false},{dataIndex:'quantity_reback',title:'退货数',editable:false},
       {dataIndex:'quantity_undeliver',title:'未交货数',editable:false}, 
       {dataIndex:'quantity_in_now',title:'本次入库数',width:120,valueType:'digit' },
       {dataIndex:'operate_time',title:'下单日期',editable:false,valueType:'date'},
    //    {dataIndex:'status',title:'状态',editable:false},
    ];

     //  操作询价单/冻结/删除/恢复
           async function operateInfo(n:number){
            // source,x_id,operater_id,otype,id
            if(selectedRecords.length==0)
               message.warning('请选择要操作的行');
             else if(n==5&&selectedRecords[0].status==5)
                        message.warning('此单据已审核，请不要重复操作');
             else if(n==6&&selectedRecords[0].status!=5)
                        message.warning('此单据未审核，不能弃审');
            else{
             const x=await s_operateInfo({x_id:1,source:'stock_out_presale_main',operater_id:1,
                         otype:n,id:selectedRecords[0].id});
             if(x.success){
               message.success('操作成功');
               actionRef_m.current?.reloadAndRest?.();
             }else
               message.error('操作错误，请联系管理员。');
            }
         }

    // 打开拣货单编辑窗口---1新增，0编辑
    function openMain(type:number){
       setEtype(type);
       setOpen(true);
    };

    //退出拣货单编辑窗口
    function exitMain(){
        setOpen(false);
    };

    //保存拣货单
    async function saveMain(){
         const fdata2=formRef_main.current?.getFieldsValue();
        //  alert(JSON.stringify(fdata2));   
        //表头数据
         const fdata={
                    //    vendor_id:fdata2.vendor_id,
                      // vouch_code:fdata2.warehouse_id,
                      memo:fdata2.memo,
                      custom_id:fdata2.custom_id,
                      business_id:fdata2.business_id,
                      org_id:fdata2.org_id,
         };
         //表体数据
        //   alert(JSON.stringify(fdata2.editable_main));
         const tdata=fdata2.editable_main.map((item:any)=>({
               material_id:item.material_id,
               userdefine_id:item.userdefine_id,
               userdefine_name:item.userdefine_name,
               quantity:item.quantity,
               source_type:item.source_type,
            //    source_order_mid:item.source_order_mid,
            //    source_order_did:item.source_order_did,
               id:item.id,
               mid:item.mid,
               memo:item.memo,
               source_order_code:item.source_order_code,
               source_order_mid:item.source_order_mid,
               source_order_did:item.source_order_did,
               warehouse_id:item.default_warehouse_id,
               deliverdate:moment(moment(item.deliverdate).toDate()).format('YYYY-MM-DD'),
           }));
        //    alert(JSON.stringify(fdata));
        //   alert(JSON.stringify(tdata));
        // x_id,operater_id,etype,source,tdata
        const x=await s_stockOut({x_id:1,operater_id:1,etype,
                                 source:'stock_out_presale',tdata:{fdata,tdata}});
        if(x.success){
            message.success('保存成功');
            setEtype(0);
            actionRef_m.current?.reloadAndRest?.();
            // alert(JSON.stringify(x.data[0][0]));
            //修改当前的表单界面值
            formRef_main.current?.setFieldsValue({
                vouch_code:x.data[0][0].vouch_code,
                id:x.data[0][0].id,
                editable_main:x.data[1],

            });
        }else
          message.warning('保存失败，请联系管理员');
    };

//编辑拣货单
function editStockIn(){
    const fdata=editableRef_main.current?.getRowsData?.();
    fdata?.map((item:any)=>{
        actionRef_main.current?.startEditable(item.rid);
    });

};


    //拣货出库调用按钮
    function stockOut(){
        // alert('执行出库，显示出库界面,与编辑界面多出实际出库数量这一栏');
       setEtype(2); 
       setOpenStockOut(true);
    };

    //退出出库界面
    function exitStockOut(){
        setOpenStockOut(false);
    }

    //编辑出库数据
    function editStockOut(){
        const fdata=editableRef_stockout.current?.getRowsData?.();
        fdata?.map((item:any)=>{
            actionRef_stockout.current?.startEditable(item.rid);
        });
    }
 

   //进入销售拣货界面
function querySale(){
  setOpenSale(true);
};

//编辑拣货单数量
function editSale(){
  const x:any[]=formRef_sale.current?.getFieldValue('editable_sale');
   
  x.map((item:any)=>{
      actionRef_sale.current?.startEditable(item.rid);
  });
};

//退出拣货单
function exitSale(){
   setOpenSale(false);
}

//加入到拣货单
function addToPreSale(){
   var fdata=formRef_main.current?.getFieldValue('eidtable_main');
   fdata=fdata?fdata:[];
   formRef_main.current?.setFieldValue('editable_main',[...selectedSale,...fdata]);
};

//根据条件查询拣货单明细
async function querySaleOrder(){
   const vouch_code=formRef_sale.current?.getFieldValue('vouch_code');
   const warehouse_id=formRef_sale.current?.getFieldValue('warehouse_id');
   const custom_id=formRef_sale.current?.getFieldValue('custom_id');
   const business_id=formRef_sale.current?.getFieldValue('business_id');
   var begindate=formRef_sale.current?.getFieldValue('begindate');
   if(begindate)
       begindate=moment(moment(begindate).toDate()).format('YYYY-MM-DD');
  var enddate=formRef_sale.current?.getFieldValue('enddate');
   if(enddate)
       enddate=moment(moment(enddate).toDate()).format('YYYY-MM-DD');

   const x=await s_getStockInfo({source:'v_sale_order_for_presale',x_id:1,
                        fdata:{x_id:1,vouch_code,warehouse_id,custom_id,business_id,begindate,enddate}});

   if(x.data[0].length==0)
      message.warning('没有找到对应的数据');
    else{
       formRef_sale.current?.setFieldValue('editable_sale',x.data[0]);
    };


};

//进入打印界面
function printSale(){
  const fdata=formRef_main.current?.getFieldValue('editable_main');
  var pdata:any=[];
  var i=0;
  while(i<fdata.length){
    
     var t=<Row style={{marginTop:20}}>
              <Col span={2} style={{textAlign:'right',marginRight:5}}>
                 {fdata[i]?<Image alt='图片' 
                     src={fdata[i].pic=='-'||fdata[i].pic==undefined?''
                           :("/basis_api/file/get?filename="+fdata[i].pic)} 
                     style={{width:70,height:70}}/>:<></>}
             </Col>
             <Col span={4}>
                 <Typography.Text>{fdata[i]?(fdata[i].code):''}</Typography.Text><br/>
                 <Typography.Text>{fdata[i]?(fdata[i].default_whposition_name):''}</Typography.Text><br/>
                 <Typography.Text>{fdata[i]?(fdata[i].quantity):''}</Typography.Text>
            </Col>
            <Col span={2} style={{textAlign:'right',marginRight:5}}>
                 {fdata[i+1]?<Image alt='图片' 
                     src={fdata[i+1].pic=='-'||fdata[i+1].pic==undefined?''
                           :("/basis_api/file/get?filename="+fdata[i+1].pic)} 
                     style={{width:70,height:70}}/>:<></>}
             </Col>
             <Col span={4}>
                 <Typography.Text>{fdata[i+1]?(fdata[i+1].code):''}</Typography.Text><br/>
                 <Typography.Text>{fdata[i+1]?(fdata[i+1].default_whposition_name):''}</Typography.Text><br/>
                 <Typography.Text>{fdata[i+1]?(fdata[i+1].quantity):''}</Typography.Text>
            </Col>
            <Col span={2} style={{textAlign:'right',marginRight:5}}>
                 {fdata[i+2]?<Image alt='图片' 
                     src={fdata[i+2].pic=='-'||fdata[i+2].pic==undefined?''
                           :("/basis_api/file/get?filename="+fdata[i+2].pic)} 
                     style={{width:70,height:70}}/>:<></>}
             </Col>
             <Col span={4}>
                 <Typography.Text>{fdata[i+2]?(fdata[i+2].code):''}</Typography.Text><br/>
                 <Typography.Text>{fdata[i+2]?(fdata[i+2].default_whposition_name):''}</Typography.Text><br/>
                 <Typography.Text>{fdata[i+2]?(fdata[i+2].quantity):''}</Typography.Text>
            </Col>
            <Col span={2}  style={{textAlign:'right',marginRight:5}}>
                 {fdata[i+3]?<Image alt='图片' 
                     src={fdata[i+3].pic=='-'||fdata[i+3].pic==undefined?''
                           :("/basis_api/file/get?filename="+fdata[i+3].pic)} 
                     style={{width:70,height:70}}/>:<></>}
             </Col>
             <Col span={4}>
                 <Typography.Text>{fdata[i+3]?(fdata[i+3].code):''}</Typography.Text><br/>
                 <Typography.Text>{fdata[i+3]?(fdata[i+3].default_whposition_name):''}</Typography.Text><br/>
                 <Typography.Text>{fdata[i+3]?(fdata[i+3].quantity):''}</Typography.Text>
            </Col>
        </Row>;
         
         i=i+4;
         pdata.push(t);
       };


  setPrintDetail(pdata);
  // var barcodeElement=document.getElementById('jsbarcode');
  // const x=JsBarcode(barcodeElement, '123456789012', {
  // format: "CODE128", // 你可以选择不同的格式，例如 CODE128, CODE39 等
  // lineColor: "#0aa",
  // width: 4,
  // height: 100,
  // displayValue: true // 是否显示条形码下面的文本值
  //   })
  // ;

  // setBarcode(x);

  setOpenPrint(true);

  

};


//退出打印界面
function exitPrint(){
  setOpenPrint(false);
};

//执行打印
function doPrint(){
  const mystyles = `@page{ margin: 1cm 1cm 1cm 1cm; }    
                              
                              //设置默认打印横纵向 
                              @media print{@page {size:landscape}} 
                              body {
                                zoom: 100%;//放大
                                display:flex;
                                justify-content:center;
                                align-item:center;
                                font_size:9;
                                }
              `;
           printJS({
                              printable:'printsale',
                              type:'html',
                              targetStyles:['*'],
                              // header:'华磊工贸',
                              style:mystyles,
                              // maxWidth:800,
                              // printableArea: {width:80,height:70},
                              scanStyles: true,
                              onLoadingStart:()=>{
                                console.log('开始打印');
                              },
                              onLoadingEnd:()=>{
                                console.log('结束打印');
                              }
                            });
};


//   ===================================================================================================
    return <>
         <ProCard title='拣货单列表' style={{height:'55vh',overflow:'auto'}}
             extra={<Space>
                {/* <Button>查询</Button> */}
                <Button onClick={()=>openMain(1)}>新增</Button>
                <Button onClick={()=>openMain(0)}>编辑</Button>
                {/* <Button onClick={()=>stockOut()}>出库</Button> */}
                <Button onClick={()=>operateInfo(5)}>审核</Button>
                <Button onClick={()=>operateInfo(6)}>取消审核</Button>
                <Button onClick={()=>operateInfo(2)}>冻结</Button>
                <Button onClick={()=>operateInfo(3)}>删除</Button>
                <Button onClick={()=>operateInfo(0)}>恢复</Button>
             </Space>}
         >
              <ProTable<DataType>
                  actionRef={actionRef_m}
                  search={{span:4}}
                  options={false}
                  columns={columns}
                  rowKey='id'
                  request={async (param)=>{
                    const x=await s_getStockInfo({source:'v_stock_out_presale_main',x_id:1,
                                   fdata:{id:0,param}});
                    setTotal(x.data[0][0].count);
                    return{
                        data:x.data[1],
                        success:true,
                    }
                  }}
                  rowSelection={{
                    type:'radio',
                    async  onChange(selectedRowKeys, selectedRows, info) {
                        setSelectedRecords(selectedRows);
                        //刷新子表明细
                        const x=await s_getStockInfo({source:'v_stock_out_presale_detail',x_id:1,
                                   fdata:{mid:selectedRowKeys.length>0?selectedRowKeys[0]:0}});
                        setTdata(x.data[0]);
                    },
                  }}
                   scroll={{y:'20vh'}}
                   pagination={{
                    showQuickJumper:true,
                    showSizeChanger:true,
                    defaultPageSize:5,
                    defaultCurrent:1,
                    total,
                  }}
                />
         </ProCard>
         {/* 拣货单明细表---------- */}
         <ProCard style={{height:300,overflow:'auto'}}>
         <ProTable<DataType2>
                  search={false}
                  options={false}
                  columns={columns2}
                  rowKey='id'
                  dataSource={tdata}
                />
        </ProCard>

        {/* 拣货单的新增/编辑主界面---------------------------------------------------------------- */}
        <Modal open={open} width='90%' style={{top:10}} okButtonProps={{hidden:true}} cancelButtonProps={{hidden:true}}
               closable destroyOnClose onCancel={()=>exitMain()} onClose={()=>exitMain()}>
           <ProCard title={etype==1?'新增拣货库':'编辑拣货库'} style={{height:900,overflow:'auto'}}
                extra={<Space>
                  <Button onClick={()=>querySale()}>选择销售单</Button>
                    <QueryMaterial2 setData={setMaterial} type='checkbox' x_id={1}/>
                    <Button onClick={()=>editStockIn()}>编辑拣货单</Button>
                    <Button onClick={()=>formRef_main.current?.submit()}>保存拣货单</Button>
                    <Button onClick={()=>printSale()}>打印拣货单</Button>
                    <Button onClick={()=>exitMain()}>退出</Button>
                </Space>}>
                <ProForm formRef={formRef_main} layout="horizontal" labelAlign="left" labelCol={{offset:0,span:6}}
                    labelWrap submitter={false} onFinish={()=>saveMain()}
                    initialValues={etype==0?{
                                  ...selectedRecords[0],
                                  editable_main:tdata,
                               }
                             :{source_type:1}}
                    >
                     <Row gutter={8}>
                         <ProFormText name='id' label='拣货单ID' width={200}   />
                         <Col span={4}>
                            <ProFormText name='vouch_code' label='拣货单号' width={200} />
                         </Col>
                         <Col span={5}>
                         <ProFormSelect name='custom_id' label='店铺'   
                            rules={[{required:true,message:'必输项'}]}
                            showSearch
                               request={async ()=>{
                                    const x=await s_getSelectData({x_id:1,source:'v_custom'});
                                      return x.data;}}
                                />
                         </Col>
                         <Col span={4}>
                         <ProFormSelect name='business_id' label='业务员' width={200} 
                            showSearch
                               request={async ()=>{
                                    const x=await s_getSelectData({x_id:1,source:'v_businesser'});
                                      return x.data;}}
                                />
                         </Col>
                         <Col span={4}>
                         <ProFormSelect name='org_id' label='部门' width={200} 
                            showSearch
                               request={async ()=>{
                                    const x=await s_getSelectData({x_id:1,source:'base_organization'});
                                      return x.data;}}
                                />
                         </Col>
                          
                         <Col span={7}>
                            <ProFormText name='memo' label='备注'  />
                         </Col>
                   </Row>
                    
                     <EditableProTable<DataType2>
                        name='editable_main'
                        rowKey='rid'
                        columns={columns2}
                        actionRef={actionRef_main}
                        editableFormRef={editableRef_main}
                        editable={{
                            type:'multiple',
                        }}
                        recordCreatorProps={false}
                        search={false}
                        options={false}
                        scroll={{y:700}}
                        />
                </ProForm>
           </ProCard>
        </Modal>
        

         {/* 销售拣货单查询界面--------------------------------------------------------------- */}
         <Modal open={openSale} width='90%' style={{top:10}} okButtonProps={{hidden:true}} cancelButtonProps={{hidden:true}}
               closable destroyOnClose onCancel={()=>exitSale()} onClose={()=>exitSale()}>
           <ProCard title= '销售拣货单'  style={{height:900,overflow:'auto'}}
                extra={<Space>
                    {/* <QueryMaterial2 setData={setMaterial} type='checkbox' x_id={1}/> */}
                    <Button onClick={()=>editSale()}>编辑拣货数量</Button>
                    <Button onClick={()=>addToPreSale()}>加入到拣货单</Button>
                    <Button onClick={()=>exitSale()}>退出</Button>
                </Space>}>
                <ProForm formRef={formRef_sale} layout="horizontal" labelAlign="left" labelCol={{offset:0,span:6}}
                    labelWrap submitter={false} 
                    // onFinish={()=>saveStockOut()}
                    // initialValues={etype==2?{
                    //               ...selectedRecords[0],
                    //               editable_stockout:tdata,
                    //               stockout_time:moment(),
                    //               source_type:1,
                    //            }
                    //          :{}}
                    >
                     <Row gutter={8}>
                         <Col span={6}>
                           {/* <ProFormText name='id' label='id' hidden={true} /> */}
                            <ProFormText name='vouch_code' label='拣货单号' width={200} />
                            <ProFormSelect name='warehouse_id' label='仓库' width={200} 
                          //  rules={[{required:true,message:'必填项'}]}
                               showSearch
                               request={async ()=>{
                                    const x=await s_getSelectData({x_id:1,source:'base2_ware'});
                                      return x.data;}}
                                />
                         </Col>
                         
                         <Col span={6}>
                          <ProFormSelect name='custom_id' label='店铺' width={200} 
                          //  rules={[{required:true,message:'必填项'}]}
                               showSearch
                               request={async ()=>{
                                    const x=await s_getSelectData({x_id:1,source:'v_custom'});
                                      return x.data;}}
                                /> 
                           <ProFormSelect name='business_id' label='业务员' width={200} 
                          //  rules={[{required:true,message:'必填项'}]}
                               showSearch
                               request={async ()=>{
                                    const x=await s_getSelectData({x_id:1,source:'v_businesser'});
                                      return x.data;}}
                                />
                               
                         </Col>
                     <Col span={6}>
                           <ProFormDatePicker name='begindate' label='销售开始日期' width={200}  />
                           <ProFormDatePicker name='enddate' label='销售截止日期' width={200}  />
                         </Col>

                   <Col span={4}>
                        <Button onClick={()=>querySaleOrder()}>查询销售单</Button>
                    </Col>
                   </Row>
                    <EditableProTable<DataType2>
                        name='editable_sale'
                        rowKey='rid'
                        columns={columns2}
                        actionRef={actionRef_sale}
                        editableFormRef={editableRef_sale}
                        editable={{
                            type:'multiple',
                        }}
                        recordCreatorProps={false}
                        search={false}
                        options={false}
                        rowSelection={{
                          type:'checkbox',
                          onChange(selectedRowKeys, selectedRows, info) {
                            setSelectedSale(selectedRows);
                          },
                        }}
                        />
                </ProForm>
           </ProCard>
        </Modal>

        {/* 打印拣货单--------------------------------------------------------- */}
         <Modal open={openPrint} width='80%' style={{top:10}} okButtonProps={{hidden:true}} cancelButtonProps={{hidden:true}}
               closable destroyOnClose onCancel={()=>exitPrint()} onClose={()=>exitPrint()}  >
           <ProCard title= '打印拣货单'  style={{height:1000,overflow:'auto',}}
                extra={<Space>
                    {/* <QueryMaterial2 setData={setMaterial} type='checkbox' x_id={1}/> */}
                    <Button onClick={()=>doPrint()}>开始打印</Button>
                     
                    <Button onClick={()=>exitPrint()}>退出</Button>
                </Space>}>
                <div id='printsale'>
                <div id="jsbarcode">{barCode}</div>
                {barCode}
                <ProForm formRef={formRef_print} layout="horizontal" labelAlign="left" labelCol={{offset:0,span:6}}
                    labelWrap submitter={false} 
                      >
                      
                     <Row gutter={8}>
                         <Col span={24}>
                              <Typography.Title style={{fontSize:20,textAlign:'center'}}>华磊工贸拣货单</Typography.Title>
                              
                         </Col>
                     </Row>
                     <Divider/>
                      {
                        printDetail.map((item:any)=>{
                          return item;
                        })
                      }
                         
                       
                </ProForm>
                </div>
           </ProCard>
        </Modal>
        </> ;
}

export default App;